<!DOCTYPE html>
<html>
<head>
    <title>Energy Level Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="nuclear-diagram" width="800" height="520"></canvas>
    <script>
        const canvas = document.getElementById('nuclear-diagram');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'black';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;

        // Helper function to draw an arrow from (x1, y1) to (x2, y2)
        function drawArrow(ctx, x1, y1, x2, y2) {
            const headlen = 12;
            const angle = Math.atan2(y2 - y1, x2 - x1);

            // Main line
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            // Arrowhead
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Helper function to draw nuclide labels with sub/superscripts
        function drawNuclide(ctx, x, y, A, Z, symbol) {
            ctx.save();
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            // Main Symbol
            ctx.font = '20px serif';
            ctx.fillText(symbol, x, y);
            const symbolWidth = ctx.measureText(symbol).width;

            // Subscript and Superscript
            ctx.font = '14px serif';
            const script_x = x - symbolWidth / 2 - 2;
            ctx.textAlign = 'right';
            ctx.fillText(A, script_x, y - 6); // Superscript
            ctx.fillText(Z, script_x, y + 8); // Subscript

            ctx.restore();
        }
        
        // --- Main Drawing Logic ---

        // 1. Define Coordinates
        // Y-coordinates for energy levels
        const y_Ca_gs = 350, y_Ca_ex = 270;
        const y_Sc_gs = 320, y_Sc_ex = 240;
        const y_Ti_gs = 300, y_Ti_ex = 220;

        // X-coordinates for level lines
        const x_Ca_start = 100, x_Ca_end = 230;
        const x_Sc_start = 350, x_Sc_end = 450;
        const x_Ti_start = 570, x_Ti_end = 700;

        // 2. Draw Frame
        ctx.strokeRect(40, 40, 720, 420);

        // 3. Draw Energy Level Lines
        // Calcium
        ctx.beginPath();
        ctx.moveTo(x_Ca_start, y_Ca_gs); ctx.lineTo(x_Ca_end, y_Ca_gs);
        ctx.moveTo(x_Ca_start, y_Ca_ex); ctx.lineTo(x_Ca_end, y_Ca_ex);
        ctx.stroke();
        // Scandium
        ctx.beginPath();
        ctx.moveTo(x_Sc_start, y_Sc_gs); ctx.lineTo(x_Sc_end, y_Sc_gs);
        ctx.moveTo(x_Sc_start, y_Sc_ex); ctx.lineTo(x_Sc_end, y_Sc_ex);
        ctx.stroke();
        // Titanium
        ctx.beginPath();
        ctx.moveTo(x_Ti_start, y_Ti_gs); ctx.lineTo(x_Ti_end, y_Ti_gs);
        ctx.moveTo(x_Ti_start, y_Ti_ex); ctx.lineTo(x_Ti_end, y_Ti_ex);
        ctx.stroke();

        // 4. Draw Connecting Lines between Nuclei
        ctx.beginPath();
        // Ground states
        ctx.moveTo(x_Ca_end, y_Ca_gs); ctx.lineTo(x_Sc_start, y_Sc_gs);
        ctx.moveTo(x_Sc_end, y_Sc_gs); ctx.lineTo(x_Ti_start, y_Ti_gs);
        // Excited states
        ctx.moveTo(x_Ca_end, y_Ca_ex); ctx.lineTo(x_Sc_start, y_Sc_ex);
        ctx.moveTo(x_Sc_end, y_Sc_ex); ctx.lineTo(x_Ti_start, y_Ti_ex);
        ctx.stroke();
        
        // 5. Draw Decay Transitions
        const trans_start_x = 370;
        const trans_end_x = 210;
        drawArrow(ctx, trans_start_x, y_Sc_ex, trans_end_x, y_Ca_ex); // Transition I
        drawArrow(ctx, trans_start_x, y_Sc_gs, trans_end_x, y_Ca_gs); // Transition II

        // 6. Draw Text Labels
        ctx.font = '18px serif';
        
        // Energy labels using Unicode for superscript plus (⁺ -> \u207A)
        const label_text_ex = "1.8 MeV (0\u207A)";
        const label_text_gs = "0.0 MeV (0\u207A)";
        
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        // Calcium labels
        ctx.fillText(label_text_ex, x_Ca_start - 10, y_Ca_ex);
        ctx.fillText(label_text_gs, x_Ca_start - 10, y_Ca_gs);
        // Scandium labels
        ctx.fillText(label_text_ex, x_Sc_start - 10, y_Sc_ex);
        ctx.fillText(label_text_gs, x_Sc_start - 10, y_Sc_gs);
        // Titanium labels
        ctx.fillText(label_text_ex, x_Ti_start - 10, y_Ti_ex);
        ctx.fillText(label_text_gs, x_Ti_start - 10, y_Ti_gs);

        // Transition labels
        ctx.font = '20px serif';
        ctx.textAlign = 'center';
        ctx.fillText("I", 280, 248);
        ctx.fillText("II", 280, 343);
        
        // Nuclide labels
        const y_nuclide_label = 400;
        drawNuclide(ctx, 165, y_nuclide_label, '42', '20', 'Ca');
        drawNuclide(ctx, 400, y_nuclide_label, '42', '21', 'Sc');
        drawNuclide(ctx, 635, y_nuclide_label, '42', '22', 'Ti');

        // Figure Caption
        ctx.font = '20px serif';
        ctx.textAlign = 'center';
        ctx.fillText("Fig. 2.30", 400, 485);

    </script>
</body>
</html>